<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素过滤选择器</title>
    <!--    引入jquery-->
    <script src="../../js/jquery-3.3.1.js"></script>
</head>
<body>
<div>
    今天吃啥：
    <ul>
        <li>火锅</li>
        <li>烧烤</li>
        <li>不吃</li>
    </ul>
    <div>
        你的爱好：
        <ul>
            <li>唱歌</li>
            <li>跳舞</li>
            <li>篮球</li>
        </ul>
    </div>
</div>


<script>
    /**
     * 在学习子元素过滤选择器之前，回顾一下基本过滤选择器
     * 子元素过滤选择器和基本过滤选择器的首个元素过滤，以及最后一个元素过滤很相似，可以对照来学习
     */
    /**
     * 首个元素过滤
     */
    $('li:first').css("color","red")
    /**
     * 最后一个元素过滤
     */
    $('li:last').css("color","green")

    /**
     * 所有父元素的第一个子元素。
     * 格式：jQuery( "xxxx:first-child" )
     * 注意：这里的父元素，是需要操作的元素
     *
     *
     */

    $('li:first-child').css("font-size","25px")

    /**
     * 所有父元素的第一个子元素。
     * jQuery( "xxxx:last-child" )
     */
    $('li:last-child').css("font-size","25px")


    /**
     * 和基本过滤选择器的区别
     * first-child：每一个首元素都可以操作
     * first：只能操作第一个出现的元素
     * last-child：每一个尾元素都可以操作
     * last:只能操作最后一个出现的元素
     */

</script>
</body>
</html>